
#go{
    position: fixed;
    z-index: 1001;
    top: 50px;
    right: 50px;
}
#more{
    position: fixed;
    z-index: 1001;
    bottom: 70px;
    right: 50px;
    animation: more 0.7s linear infinite alternate;
}
.content{
    height: 600px;
    width: 900px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -450px;
}
.screen01{
    background: url("../images/01-bg.png") no-repeat center bottom;
}
.screen01 .fly{
    position: absolute;
    right: 0;
    top: 0;
    animation: fly01 1s linear infinite alternate;
}
.screen01 .sofa{
    position: absolute;
    left: 220px;
    top: 150px;
    animation: sofa01 0.6s linear infinite alternate;
}
.screen01 .goods{
    position: absolute;
    left: 30px;
    top: 230px;
}



/*第一屏动画*/
@keyframes more {
    from{
        transform: translateY(-30px);
    }
    to{
        transform: translateY(30px);
    }
}
@keyframes fly01 {
    from{
        transform: translateY(-50px);
    }
    to{
        transform: translateY(50px);
    }
}
@keyframes sofa01 {
    from{
        transform: translateY(-30px);
    }
    to{
        transform: translateY(30px);
    }
}

.screen02{
    background: url("../images/02-bg.png") no-repeat center bottom;
}
.screen02 .text{
    position: absolute;
    left: 50%;
    margin-left: -180px;
}
.screen02 .text01{
    position: absolute;
}
.screen02 .text02{
    position: absolute;
    opacity: 0;
}
.screen02.now .text02{
    opacity: 1;
    transition: all 2s linear 1s;
}
.screen02 .input{
    position: absolute;
    top: 120px;
    right: 172px;
    /*transform: scale(0.7);*/
    transform-origin: right top;
    opacity: 0;
}
.screen02.now .input{
    animation: input02 3s linear forwards;
}
.screen02 .key{
    position: absolute;
    top: 4px;
    left: 100px;
    opacity: 0;
}
.screen02.now .key{
    opacity: 1;
    transition: all 1s linear 1s;
}
.screen02 .goods{
    position: absolute;
    top: 174px;
    left: 223px;
    transform: scale(0);
    transform-origin: right bottom;
}
.screen02.now .goods{
    transform: scale(1);
    transition: all 1s linear 2s;
}
.screen02 .sofa{
    position: absolute;
    top: 181px;
    left: 336px;
    transform :scale(0.5);
    transform-origin: left top;
    opacity: 0;
    z-index: 1001;
}
.screen02.leaved .sofa{
    opacity: 1;
    animation: sofa02 1s linear;
}

/*第二屏动画*/
@keyframes input02 {
    0%{
        transform: translate(1000px,130px);
        opacity: 1;
    }
    33.3%{
        transform: translate(-180px,160px);
    }
    66.6%{
        transform: translate(-180px,160px);
    }
    100%{
        transform: scale(0.7);;
        opacity: 1;
    }
}

@keyframes sofa02 {
    from{

    }
    to{
        transform: translate(-120px,940px) scale(1);
    }
}

/*第三屏*/
.screen03{
    background: url("../images/03-bg.png") no-repeat center bottom;
}
.screen03 .cart{
    position: absolute;
    right: 195px;
    top: 440px;
}
.screen03 .cart02{
    position: absolute;
    opacity: 0;
}
.screen03.now .cart01{
    display: none;
    transition: all 1s linear;
}
.screen03.now .cart02{
    position: static;
    opacity: 1;
    transition:opacity 1s linear;
}
.screen03 .change{
    position: absolute;
    right: 116px;
    top: 300px;
}
.screen03 .change02{
    position: absolute;
    opacity: 0;
}
.screen03.now .change01{
    display: none;
    transition: all 0.1s linear;
}
.screen03.now .change02{
    position: static;
    opacity: 1;
    transition:opacity 0.3s linear 0.2s;
}
.screen03 .sofa{
    position: absolute;
    top: 173px;
    left: 216px;
    opacity: 0;
}
.screen03.now .sofa{
    opacity: 1;
    transition: all 0s linear 0.3s;
}
.screen03.leaved .sofa{
    animation: sofa03 0.75s linear;
    z-index: 1001;
}
@keyframes sofa03 {
    from{

    }
    to{
        transform: translate(150px,950px) rotate(45deg);
    }
}
/*第四屏*/
.screen04{
    background: url("../images/04-bg.png") no-repeat center bottom;
}
.screen04 .cloud{
    position: absolute;
    top: 70px;
}
.screen04.now .cloud{
    animation: cloud04 8s linear infinite alternate;
}
.screen04 .text{
    position: absolute;
    left: 50%;
    transform: translateX(-215px);
}
.screen04.show .text01{
    position: absolute;
    opacity: 0;
}
.screen04 .text02{
    position: absolute;
    opacity: 0;
}
.screen04.show .text02{
    position: static;
    opacity: 1;
}
.screen04 .address{
    position: absolute;
    left: 50%;
    transform: translateX(-140px);
    top: 100px;
    opacity: 0;
}
.screen04.show .address{
    opacity: 1;
    transition: opacity 1s linear;
}
.screen04 .address02{
    position: absolute;
    top: 60px;
    left: 40px;
}
.screen04 span{
    font-size: 16px;
    color: white;
}
.screen04 p{
    font-size: 14px;
    line-height: 10px;
    color: darkred;
    margin: 0 0;
}
.screen04 .hd{
    margin-right: 20px;
}
.screen04 .cart{
    text-align: center;
    position: absolute;
    bottom: 45px;
    left: 210px;
    z-index: 1001;
}
.screen04 .sofa{
    transform: rotate(45deg);
    position: absolute;
    top: 174px;
    left: 367px;
    opacity: 0;
}
.screen04.now .sofa{
    opacity: 1;
    transition: opacity 0s linear 1.0s;
    transform: translateX(1500px);
    transition: transform 0.5s linear 0s;
}
.screen04.now .cart{
    transform: translateX(1500px);
    transition: transform 0.5s linear 0s;
}



@keyframes cloud04 {
    from{

    }
    to{
        transform: translateX(800px);
    }
}

/*第五屏开始*/
.screen05{
    background: url("../images/05-bg.png") no-repeat center bottom;
}
.screen05 .content{
    height: 100%;
}
.screen05 .mouse{
    height: 100%;
    width: 205px;
    position: absolute;
    right: 0;
    bottom: 0px;
    overflow: hidden;
}

.screen05 .mouse img:first-child,
.screen05 .mouse img:last-child
{
    position: absolute;
    bottom: 230px;
}
.screen05 .mouse img:last-child{
    opacity: 0;
}
.screen05 .hand{
    position: absolute;
    right: 50px;
    bottom: -1010px;
}
.screen05 .text{
    position: absolute;
    left: 30px;
    bottom: 560px;
}
.screen05 .card{
    position: absolute;
    left: 30px;
    bottom: 210px;
}
.screen05 .card img:first-child{
    position: relative;
    z-index: 4;
}
.screen05 .card img:last-child{
    position: absolute;
    left: 100px;
    top: 0px;
}
.screen05 .sofa{
    position: absolute;
    left: 100px;
    bottom: 200px;
    z-index: 2;
}
.screen05.now .hand{
    transform: translateY(-1000px);
    transition: transform 1s linear;
}
.screen05.now .mouse img:last-child{
    opacity: 1;
    transition: all 0.1s linear 1s;
}
.screen05.now .sofa{
    animation: sofa05 2s linear 1.1s forwards;
}
.screen05.now .card img:last-child{
    transform: translateY(-100px);
    transition: all 1s linear 2.1s;
}
.screen05.leaved .sofa{
    /*transform: translateY(1000px) scale(0.1) rotate(0);*/
    /*transition: transform 0.7s linear;*/
    animation: sofa05-06 1s linear;
}
@keyframes sofa05 {
    0%{
        transform: translateY(-1000px);
    }
    50%{
        transform: none;
    }
    100%{
        transform: translateY(80px) rotate(20deg);
    }
}
@keyframes sofa05-06 {
    from{
        transform: rotate(0);
    }
    to{
        transform: translate(-10px,900px) scale(0.1);
    }
}


/*第六屏*/

.screen06 {
    background: url("../images/06-bg.png") no-repeat -200px bottom;
}
.screen06 .cloud img:first-child{
    position: absolute;
    top: 200px;
    animation: cloud06 15s linear infinite alternate;
}
.screen06 .cloud img:last-child{
    position: absolute;
    top: 150px;
    animation: cloud06 19s linear infinite alternate;
}

@keyframes cloud06 {
    from {

    }
    to{
        transform: translateX(2000px);
    }
}
.screen06 .box{
    position: absolute;
    left: 120px;
    z-index: 4;
}
.screen06 .car{
    position: absolute;
    left: 90px;
    bottom: 10px;
    z-index: 5;
}
.screen06 .car .worker{
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: left bottom;
    transform: scale(0);
    /*left: 140px;*/
    /*bottom: 110px;*/
}
.screen06 .car .buyer{
    position: absolute;
    right: -70px;
    top: -50px;
}
.screen06 .text{
    position: absolute;
    left: 100px;
    top: 30px;
}
.screen06 .text img:last-child{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.screen06.now .box{
    transform: translateY(460px);
    transition: all 0.7s linear ;
}
.screen06.now{
    background-position-x: -1100px;
    transition: all 1s linear 0.7s;
}
.screen06 .door{
    position: absolute;
    right: 17px;
    bottom: 113px;
    opacity: 0;
}
.screen06 .person{
    position: absolute;
    transform-origin: right bottom;
    transform: scale(0.4);
    right: 20px;
    bottom: 119px;
    z-index: 2;
    opacity: 0;
}
.screen06 .say{
    position: absolute;
    left: 440px;
    top: 10px;
    opacity: 0;
}

.screen06.now .worker{
    animation: worker06 1.5s linear 1.7s forwards ;
}
.screen06.now .door{
    opacity: 1;
    transition: all 0.2s linear 3.2s;
}
.screen06.now .text img:last-child{
    opacity: 1;
    transition: all 0.1s linear 3.4s;
}
.screen06.now .say{
    opacity: 1;
    transition: all 0.1s linear 3.4s;
}
.screen06.now .person{
    animation: person06 1.2s linear 3.5s forwards;
}
@keyframes worker06 {
    0%{

    }
    45%{
        transform: scale(1);
    }
    66.7%{
        transform: translateY(-110px);
    }
    100%{
        transform: translate(140px,-110px);
    }
}
@keyframes person06 {
    0%{

    }
    20%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        transform: translateX(-200px) scale(1);
    }

}

/*第七屏*/
.screen07{
    background: url("../images/07-bg.png") no-repeat center bottom;
}
.screen07 .content .star{
    position: absolute;
    left: 157px;
    top: 137px;
    z-index: 999;
}
.screen07 .content .star img{
    display: none;
}
.screen07 .content .star img:nth-child(3){
    margin-left: 3px;
}
.screen07 .content .star img:last-child{
    margin-left: 2px;
}
.screen07 .content .text{
    position: absolute;
    top: 175px;
    left: 167px;
    opacity: 0;
    transform-origin: left bottom;
    transform: scale(0);
}
.screen07 .content .text.show{
    opacity: 1;
    transform: none;
    transition: all 1s linear 2s;
}


/*第八屏*/
.screen08{
    background: url("../images/08-bg.png");
}
.screen08 .btn1{
    margin: 0 auto;
    width: 390px;
    height: 160px;
    position: relative;
}
.screen08 .btn1 img:first-child{
    position: absolute;
    left: 0;
    top: 0;
}
.screen08 .btn1 img:last-child{
    z-index: 10;
    position: absolute;
    opacity: 0;
}
.screen08 .btn1:hover img:last-child{
    opacity: 1;
}
.screen08 .btn2{
    position: absolute;
    right: 0;
    top: 0;
}
